<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini" onload="checkBrowser()">
<section class="content-header">
    <h1 style="display: inline-block">库存划项目标记操作</h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header" style="text-align: left">
                    <form id="modalQueryForm">
                        <div class="row" id="HiddenDiv">
                            <div class="form-inline">

                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>跟踪号</label>
                                    <input type="text" id="ityTrackCode" name="ityTrackCode"
                                           class="form-control"
                                           placeholder="请输入跟踪号">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>项目名称</label>
                                    <input type="text" id="ityProName" name="ityProName"
                                           class="form-control"
                                           placeholder="请输入项目名称">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>项目编号</label>
                                    <input type="text" id="ityProCode" name="ityProCode"
                                           class="form-control"
                                           placeholder="请输入项目编号">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>
                                        物料描述
                                    </label>
                                    <input type="text" id="ityMatDesc" name="ityMatDesc"
                                           class="form-control"
                                           placeholder="请输入物料描述">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>
                                        物料编码
                                    </label>
                                    <input type="text" id="itySapCode" name="itySapCode"
                                           class="form-control"
                                           placeholder="请输入物料编码">
                                </div>

                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>
                                        库位
                                    </label>
                                    <input type="text" id="ityPosition" name="ityPosition"
                                           class="form-control"
                                           placeholder="请输入库位">
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>仓库</label>
                                    <select id="ityWhiId" class="form-control select" name="ityWhiId"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: auto!important;">
                                    </select>
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <label>
                                        生产状态
                                    </label>
                                    <select id="proProductionStatus" name="proProductionStatus"
                                            class="form-control select"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 100px!important;">
                                        <option value="" selected="selected">全部</option>
                                        <option value="-1">无状态</option>
                                        <option value="1">未开始</option>
                                        <option value="2">执行中</option>
                                        <option value="3">已完成</option>
                                        <option value="4">取消</option>
                                        <option value="5">暂缓</option>
                                    </select>
                                </div>
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                    <button type="button" class="btn btn-success" id="btn_inventorySearch">搜索</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body" style="text-align: center;">
                    <table id="inventoryQueryTable" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--库存划项目标记模态框-->
<div class="modal fade" id="modal-inventory-project">
    <div class="modal-dialog" style="width:500px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">库存划项目标记</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                            </div>
                            <div class="box-body">
                                <form id="modalForm" class="form-horizontal" role="form">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <input type="hidden" name="ipmBeforeItyId">
                                                <label class="control-label col-sm-5"
                                                       for="ityMatDescModal">外购件物料描述</label>
                                                <div class="col-sm-6">
                                                    <input name="ityMatDesc" id="ityMatDescModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <input type="hidden" name="ipmBeforeItyId">
                                                <label class="control-label col-sm-5"
                                                       for="ipmMatDesc">提报计划物料描述</label>
                                                <div class="col-sm-6">
                                                    <input name="ipmMatDesc" id="ipmMatDesc" class="form-control"
                                                           type="text" maxlength="255"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5"
                                                       for="ipmInProjectCodeModal">新项目编号</label>
                                                <div class="col-sm-6">
                                                    <input name="ipmInProjectCode"
                                                           id="ipmInProjectCodeModal"
                                                           class="form-control" type="text"
                                                           list="ceoNeedProCodeList"
                                                           onchange="changeIpmInProjectName()"
                                                           oninput="findProCodeListData(this)"/>
                                                    <datalist id="ceoNeedProCodeList">
                                                    </datalist>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5"
                                                       for="ipmInProjectNameModal">新项目名称</label>
                                                <div class="col-sm-6">
                                                    <input name="ipmInProjectName" id="ipmInProjectNameModal"
                                                           class="form-control" type="text"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5" for="ityAvaNumModal">可用数量</label>
                                                <div class="col-sm-5" style="padding-right: 0px">
                                                    <input name="ityAvaNum" id="ityAvaNumModal" class="form-control"
                                                           type="text" style="width: 160px!important;"
                                                           readonly="readonly"/>

                                                </div>
                                                <div class="col-sm-1" style="margin: 0;padding: 0px">
                                                    <input name="ityAvaNumUnit" id="ityAvaNumUnitModal"
                                                           class="form-control"
                                                           style="background-color: white;border-color: white;color: black;width: 50px!important;padding: 0px"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5" for="ipmNumModal">标记数量</label>
                                                <div class="col-sm-5" style="padding-right: 0px">
                                                    <input name="ipmNum" maxlength="9" id="ipmNumModal"
                                                           oninput="checkValue(this)" style="width: 160px!important;"
                                                           class="col-sm-5 form-control" type="text"/>
                                                </div>
                                                <div class="col-sm-1" style="margin: 0;padding: 0px">
                                                    <input name="ipmNumUnit" id="ipmNumUnitModal"
                                                           class="col-sm-3 form-control"
                                                           style="background-color: white;border-color: white;color: black;width: 50px!important;padding: 0px"

                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5" for="ipmRemarkModal">标准号</label>
                                                <div class="col-sm-6">
                                                    <input name="ipmStandardNo" id="ipmStandardNo" class="form-control"
                                                           type="text" maxlength="255"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-5" for="ipmRemarkModal">划拨说明</label>
                                                <div class="col-sm-6">
                                                    <input name="ipmRemark" id="ipmRemarkModal" class="form-control"
                                                           type="text" maxlength="255"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button shiro:hasPermission="purinv:purwarpro:edit" class="btn btn-info" id="btn-save">保存</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    var modalTable;
    var statusText = ["无状态", "执行中", "未开始", "暂缓", "已完成","取消"];
    function checkBrowserFun() {
        let is360 = false;
        let isIE = false;
        let isFirefox = false;
        let isChrome = false;
        let isEdge = false;
        let broName = 'Runing';
        let str = '';
        let strStart = 0;
        let strStop = 0;
        let arr = new Array();
        let temp = '';
        let userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform
        /*alert(userAgent);*/
        //FireFox
        if (userAgent.indexOf('Firefox') != -1) {
            isFireFox = true;
            /*broName = 'FireFox浏览器';*/
            strStart = userAgent.indexOf('Firefox');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号')

        }
        //Edge
        if (userAgent.indexOf('Edge') != -1) {
            isEdge = true;
            /*broName = 'Edge浏览器';*/
            strStart = userAgent.indexOf('Edge');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号');
        }
        //IE浏览器
        if (userAgent.indexOf('NET') != -1 && userAgent.indexOf("rv") != -1) {
            isIE = true;
            /*broName = 'IE浏览器'; */
            strStart = userAgent.indexOf('rv');
            strStop = userAgent.indexOf(')');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('rv', 'IE').replace(':', '版本号');
        }
        //360极速模式可以区分360安全浏览器和360极速浏览器
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) {
            if (navigator.javaEnabled()) {
                is360 = true;
                broName = '360安全浏览器-极速模式';
            } else {
                is360 = true;
                broName = '360极速浏览器-极速模式';
            }
        }
        //360兼容
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) {
            is360 = true;
            broName = '360兼容模式';
        }
        //Chrome浏览器
        if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf('Chrome') > 0 && userAgent.indexOf("Edg") < 0) {
            isChrome = true;
            /*broName = 'Chrome浏览器';*/
            strStart = userAgent.indexOf('Chrome');
            strStop = userAgent.indexOf(' Safari');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('/', '版本号');
        }
        return isChrome;
    }

    /**
     * 检测浏览器
     * */
    function checkBrowser(){
        if(!checkBrowserFun()){
            js.modal.warning("尊敬的客户，您使用浏览器不是谷歌浏览器，请使用谷歌浏览器访问本系统！");
            location.href=ctx+"overview/index";
        }
    }

    /**
     *@FunctionName: checkValue
     *@Description: 检测控制其值不可大于库存可用数量
     *@Author: 徐一贺
     *@CreateDate: 2020/4/21 19:23
     *@Phone: 18241927380
     *@Param:
     *@Return:
     *@Version:
     */
    function checkValue(obj) {
        obj.value = obj.value.replace(/[^-\d.]/g, "");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(/\-{2,}-/g, "-"); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3');//只能输入两个小数
        if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value = obj.value;
        }
        var compareValue = $("#modalForm [name='ityAvaNum']").val();
        if (compareValue != undefined && compareValue != null && compareValue != '') {
            if (Number($(obj).val()) > Number(compareValue)) {
                $(obj).val(compareValue);
            }
        }
    }


    /**
     *@FunctionName: loadInventory
     *@Description: 加载库存
     *@Author: 徐一贺
     *@CreateDate: 2020/4/16 9:27
     *@Phone: 18241927380
     *@Param:
     *@Return:
     *@Version:
     */
    function loadInventory() {
        $('#inventoryQueryTable').bootstrapTable('destroy');
        modalTable = js.table.init({
            id: 'inventoryQueryTable',
            url: ctx + "purchase/invPro/inventoryList",
            sortable: true,                                    // 是否启用排序
            sortStable: true,                                  // 设置为 true 将获得稳定的排序
            showColumns: true,
            showExport: false,
            uniqueId: "ityId",
            queryForm: 'modalQueryForm',
            pageSize: 300,
            onLoadSuccess: function () {
                $("#btn_inventorySearch").prop('disabled', false).removeClass('disabled');
                $('#inventoryQueryTable thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#inventoryQueryTable tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '序号', field: 'ityId', width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料编码', field: 'itySapCode', width: '120'},
                {title: '物料描述', field: 'ityMatDesc', width: '200'},
                {title: '可用数量', field: 'ityAvaNum', sortable: true},
                {title: '单位', field: 'ityNumUnit'},
                {
                    title: '项目编号', field: 'ityProCode', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {
                    title: '项目名称', field: 'ityProName', width: '200', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }
                },
                {
                    title: '生产状态', field: 'proProductionStatus',
                    formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = 0;
                        }
                        return statusText[value];
                    }
                },
                {
                    title: '备注', field: 'ityRemark',
                    formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            return "";
                        }
                        return value;
                    }
                },
                {title: '仓库', field: 'whiName'},
                {title: '库位', field: 'ityPosition'},
                {
                    title: '在库类型', field: 'ityStockType',
                    formatter: function (value, row, index) {
                        var ityStockType = "";
                        if (value == 1) {
                            ityStockType = "库存在库";
                        } else if (value == 2) {
                            ityStockType = "项目在库";
                        }
                        return ityStockType;
                    }
                },
                {
                    title: '  操作',
                    width: '40',
                    field: 'ityDataStatus',
                    formatter: function (value, row, index) {
                        if (hasP('purinv:purwarpro:edit')) {
                            var ityDataStatus = "";
                            if (value == 2) {
                                ityDataStatus = 'disabled';
                            } else {
                                ityDataStatus = '';
                            }
                            return '<button class="btn btn-info btn-xs" ' + ityDataStatus + ' onclick="selectInventoryToProject(' + row.ityId + ')" type="button" >标记</button>';
                        }
                        return '';
                    }
                }
            ]
        });
    }

    /**
     *@FunctionName: selectInventoryToChange
     *@Description: 选择
     *@Author: 徐一贺
     *@CreateDate: 2020/4/16 10:43
     *@Phone: 18241927380
     *@Param: [ityId]库存主键
     *@Version: 1.0.0
     */
    function selectInventoryToProject(ityId) {
        var rows = $('#inventoryQueryTable').bootstrapTable('getRowByUniqueId', ityId);//行的数据
        js.modal.open("modal-inventory-project");
        $("#modalForm [name='ityMatDesc']").val(rows.ityMatDesc);
        $("#modalForm [name='ipmMatDesc']").val(rows.ityMatDesc);
        $("#modalForm [name='ityAvaNum']").val(rows.ityAvaNum);
        $("#modalForm [name='ityAvaNumUnit']").val(rows.ityNumUnit);
        $("#modalForm [name='ipmNumUnit']").val(rows.ityNumUnit);
        $("#modalForm [name='ipmBeforeItyId']").val(rows.ityId);
    }


    /**
     *@FunctionName: findWarehouseList
     *@Description: 获取仓库列表
     *@Author: 徐一贺
     *@CreateDate: 2020/3/24 15:31
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function findWarehouseList() {
        js.ajax({
            url: ctx + 'common/warehouseInfo/list',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    $('#ityWhiId').empty();
                    $('#ityWhiId').append('<option value="">全部</option>');
                    $("#changeOrderForm [name='ceoUseWhiId']").empty();
                    for (var i = 0; i < result.data.rows.length; i++) {
                        $('#ityWhiId').append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                        $("#changeOrderForm [name='ceoUseWhiId']").append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        })
    }


    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 16:10
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选
     *@Author: 徐一贺
     *@CreateDate: 2020/4/8 15:20
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function selectAll(obj) {

        $('input[name="cb_inventory"]').each(function () {
            if (!$(this).prop("disabled")) {
                if ($(obj).prop("checked")) {
                    $(this).prop("checked", true);
                }
                if ($(obj).prop("checked") == false) {
                    $(this).prop("checked", false);
                }
            }
        })

    }

    /**
     *@FunctionName: findProCodeListData
     *@Description: 根据项目号模糊查询获取项目号列表
     *@Author: 徐一贺
     *@CreateDate: 2020/4/18 12:59
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function findProCodeListData(obj) {
        $.post(ctx + 'purchase/invPro/findProCodeList', {
            code: $(obj).val()
        }, function (result) {
            if (result.type == 'SUCCESS') {
                $("#ceoNeedProCodeList").empty();
                for (var i = 0; i < result.data.length; i++) {
                    $("#ceoNeedProCodeList").append('<option value="' + result.data[i].code + '" data="' + result.data[i].name + '" data-status="' + result.data[i].status + '"></option>');
                }
            }
        }, 'json');
    }

    function changeIpmInProjectName() {
        var input_select = $("#modalForm [name='ipmInProjectCode']").val();
        var option_length = $("#ceoNeedProCodeList").find("option").length;
        for (var i = 0; i < option_length; i++) {
            if (input_select == $("#ceoNeedProCodeList option").eq(i).attr('value')) {
                $("#modalForm [name='ipmInProjectName']").val($("#ceoNeedProCodeList option").eq(i).attr("data"));
                break;
            }
        }
    }

    $(function () {
        $("title").html($("title").html()+" —— 库存划项目标记");
        $("#import").click(function () {
            location.href = ctx + 'purchase/invPro/importPage';
        })
        findWarehouseList();
        loadInventory();
        //重置
        $("#btn_reset").on('click', function () {
            //JQuery清空表单内容
            $("#changeOrderForm")[0].reset();

            //bootstrapValidator清空重置验证提示状态
            $(".form-horizontal").data("bootstrapValidator").resetForm();
            js.modal.success("重置表单成功！");
        })
        //保存
        $("#btn-save").on('click', function () {
            //验证通过式提交
            js.validSubmit({
                formId: "modalForm",
                url: ctx + "purchase/invPro/save",
                data: new FormData($("#modalForm")[0]),
                success: function (result) {
                    if (result.type == web_status.SUCCESS) {
                        js.table.refresh(modalTable);
                        js.modal.success("标记成功！")
                        js.modal.hide("modal-inventory-project");
                        $("#modalForm")[0].reset();
                        $(".form-horizontal").data("bootstrapValidator").resetForm();
                        // window.history.back();
                    } else {
                        js.modal.warning(result.msg)
                    }
                }
            });
        })


        // 验证初始化
        js.validate.init("modalForm", {
            fields: {
                ipmInProjectCode: {
                    validators: {
                        notEmpty: {message: '请输入新项目编号'},
                        threshold: 6, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        callback: {
                            message: "项目号不存在",
                            callback: function (value, validator) {
                                var flag = false;
                                $.ajax({
                                    url: ctx + 'purchase/change/codeExist', // 请求路径
                                    type: 'POST',
                                    async: false,	// 同步请求，必须是false
                                    data: {
                                        ceoNeedProCode: $("#modalForm input[name='ipmInProjectCode']").val() // 请求参数
                                    },
                                    success: function (res) {
                                        flag = $.parseJSON(res).valid;
                                    }
                                });
                                return flag;
                            }
                        }
                    }
                },
                ipmInProjectName: {validators: {notEmpty: {message: '请输入新项目要名称'}}},
                ipmNum: {
                    validators: {
                        notEmpty: {message: '请输入标记数量'}
                    }
                },
            }
        });

        /**
         * 表格搜索
         */
        $("#btn_inventorySearch").on('click', function () {
            $("#btn_inventorySearch").prop('disabled', true).addClass('disabled');
            js.table.search(modalTable);
        });

    });

</script>
</body>
</html>
